<div class="settings-page">
    <h1>{{'Settings.AltCurrency.Title' | translate}}</h1>
    <p class="description">{{'Settings.AltCurrency.Description' | translate}}</p>
    <mat-form-field class="settings-page-field" appearance="outline">
        <mat-label>{{'Settings.AltCurrency.Label' | translate}}</mat-label>
        <mat-select [(value)]="currentCurrency"  [placeholder]="'Settings.AltCurrency.Label' | translate">
            <mat-form-field class="mat-select-search" floatLabel="never">
                <input matInput [placeholder]="'Settings.AltCurrency.Search' | translate"
                       [(ngModel)]="searchedAltCurrency"
                       (ngModelChange)="findCurrency(searchedAltCurrency)">
                <!-- Search Icon -->
                <button matSuffix mat-icon-button *ngIf="!searchedAltCurrency">
                    <mat-icon>search</mat-icon>
                </button>
                <!-- Clear search text -->
                <button matSuffix mat-icon-button (click)="clearSearch()" *ngIf="searchedAltCurrency && searchedAltCurrency.length > 0">
                    <mat-icon>clear</mat-icon>
                </button>
            </mat-form-field>

            <!-- List Alt Currencies -->
            <mat-selection-list class="alt-currency-list" [ngClass]="{'empty-currencies': altCurrencyList.length == 0}">

                <!-- Last used alt currency -->
                <ng-container *ngIf="lastUsedAltCurrencyList[0]">
                    <mat-option *ngFor="let lastUsedAltCurrency of lastUsedAltCurrencyList" (click)="onChangeCurrency(lastUsedAltCurrency)"
                                [value]="lastUsedAltCurrency.isoCode">
                        {{ lastUsedAltCurrency.name }}
                        <span fxFlex></span>
                        <span class="symbol">{{ lastUsedAltCurrency.symbol }}</span>
                    </mat-option>
                    <mat-divider></mat-divider>
                </ng-container>

                <!-- all currency -->
                <ng-container *ngIf="altCurrencyList[0]">
                    <ng-container *ngIf="altCurrencyList.length == 0">
                        <mat-spinner class="loading" [diameter]="30" [strokeWidth]="2"></mat-spinner>
                    </ng-container>
                    <mat-option *ngFor="let alt of altCurrencyList" [value]="alt.isoCode" (click)="onChangeCurrency(alt)">
                        {{alt.name}}
                        <span fxFlex></span>
                        <span class="symbol">{{ alt.symbol }}</span>
                    </mat-option>
                </ng-container>
            </mat-selection-list>

        </mat-select>
    </mat-form-field>
</div>
